<template>
  <div>
    <customDialog
      :title="`剧目提审任务详情`"
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      :showFoot="false"
      width="1100"
    >
      <div class="table_box_wrapper">
        <div class="search_box">
          <el-form :inline="true" :model="formData">
            <el-form-item>
              <el-select
                v-model="formData.status"
                placeholder="全部状态"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item?.value"
                  :label="item.label"
                  :value="item?.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList(1)">查 询</el-button>
              <el-button type="primary" @click="resetList">重 置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="count_box">
          <span>{{ `审核中：${countData.reviewingAppCount}` }}</span>
          <span class="green" style="margin: 0 10px">
            {{ `审核通过：${countData.reviewedAppCount}` }}
          </span>
          <span class="red">
            {{ `审核失败：${countData.reviewFailedAppCount}` }}
          </span>
        </div>
        <custom-table
          :loading="loading"
          :columns="columns"
          :tableData="tableData"
          :pageObj="pageObj"
          @sizechange="sizechange"
          @currentChange="currentChange"
          :maxHeight="500"
          class="table_box"
        >
          <template #updateAt="{ scope }">
            <span v-if="scope.row?.updateAt">
              {{
                moment(scope.row?.updateAt + "Z").format("YYYY-MM-DD HH:mm:ss")
              }}
            </span>
          </template>
          <template #vodFileName="{ scope }">
            <el-tooltip
              :content="scope.row?.vodFileId"
              placement="bottom"
              effect="light"
            >
              <span>{{ scope.row?.vodFileName }}</span>
            </el-tooltip>
          </template>
          <template #status="{ scope }">
            <el-tag v-if="!scope.row?.status" type="warning"> 未审核</el-tag>
            <el-tag v-if="scope.row?.status == 1"> 审核中</el-tag>
            <el-tag v-if="scope.row?.status == 2" type="success">
              审核通过
            </el-tag>
            <el-tag v-if="scope.row?.status == 3" type="danger">
              审核失败
            </el-tag>
          </template>
          <template #operator="{ scope }">
            <el-button type="primary" @click="lookReason(scope.row)"
              >失败原因</el-button
            >
          </template>
        </custom-table>
      </div>
    </customDialog>

    <!-- 错误原因图片展示 -->
    <failImg ref="failRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import customTable from "@/components/CustomTable/index.vue";
import customDialog from "@/components/CustomDialog/index.vue";
import failImg from "./failImg.vue";
import { reviewDetail } from "@/api/operateCenter/episode/index";
import moment from "moment";

const dialogVisible = ref(false);
const loading = ref<boolean>(false);
const statusOptions = ref<any>([
  { label: "未审核", value: 0 },
  { label: "审核中", value: 1 },
  { label: "审核通过", value: 2 },
  { label: "审核失败", value: 3 },
]);
interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const form = {
  pageNo: 1,
  pageSize: 10,
  appId: undefined,
  operaId: undefined,
  status: undefined,
};
const formData = ref(Object.assign({}, form));
const countData = ref({
  reviewingAppCount: 0,
  reviewedAppCount: 0,
  reviewFailedAppCount: 0,
}); // 上传任务数据
const tableData = ref<Array<any>>([]);

const columns = reactive([
  {
    prop: "updateAt",
    label: "审核时间",
    slotName: "updateAt",
    sortable: true,
    minWidth: 80,
  },
  { prop: "appName", label: "小程序名称", minWidth: 70 },
  { prop: "operaId", label: "剧目ID", minWidth: 45 },
  {
    prop: "operaName",
    label: "剧目名称",
    minWidth: 60,
  },
  { prop: "episode", label: "集数", sortable: true, minWidth: 50 },
  { prop: "reason", label: "驳回原因", minWidth: 200 },
  { prop: "status", slotName: "status", label: "审核结果", minWidth: 60 },
  {
    label: "操作",
    prop: "operator",
    slotName: "operator",
    fixed: "right",
    width: 120,
  },
]);

// 查看失败原因
const failRef = ref();
const lookReason = (row: Record<string, any>) => {
  failRef.value.showDialog(row);
};

// 重置
const resetList = () => {
  Object.assign(formData.value, form);
  getList(1);
};

const getList = (val = 0) => {
  // if (!val) {
  //   formData.value.pageNo = pageObj.pageNo;
  //   formData.value.pageSize = pageObj.pageSize;
  // } else {
  //   formData.value.pageNo = pageObj.pageNo = val === 1 ? val : 1;
  //   formData.value.pageSize = pageObj.pageSize =
  //     val === 1 ? 10 : pageObj.pageSize;
  // }
  formData.value.pageNo = pageObj.pageNo;
  formData.value.pageSize = pageObj.pageSize;

  formData.value.appId = !formData.value.appId
    ? undefined
    : formData.value.appId;
  formData.value.status = formData.value.status ?? undefined;
  loading.value = true;
  reviewDetail(formData.value)
    .then((res: Record<string, any>) => {
      tableData.value = res.data;
      pageObj.total = Number(res.total);
    })
    .finally(() => {
      loading.value = false;
    });
};

const currentChange = (val: number) => {
  pageObj.pageNo = val;
  getList();
};

const sizechange = (val: number) => {
  pageObj.pageSize = val;
  getList(2);
};

// 父级电子显示dialog
const showDialog = (val: Record<string, any>, str = undefined) => {
  // console.log("---显示分配分销商----**----", val);
  let countD = {
    reviewingAppCount: val?.reviewingAppCount,
    reviewedAppCount: val?.reviewedAppCount,
    reviewFailedAppCount: val?.reviewFailedAppCount,
  };
  countData.value = countD;
  dialogVisible.value = true;
  formData.value.operaId = val?.id;
  if (str == "进行中") {
    formData.value.status = 1 as any;
  } else if (str == "成功") {
    formData.value.status = 2 as any;
  } else if (str == "失败") {
    formData.value.status = 3 as any;
  } else {
    formData.value.status = 0 as any;
  }
  getList();
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.search_box {
  padding-left: 0;

  :deep(.el-form-item) {
    margin-bottom: 10px;
  }
}

.table_box_wrapper {
  margin-top: -15px;

  :deep(.table_content) {
    padding: 10px 0;
  }

  .count_box {
    font-size: 16px;
  }
}
</style>
